<template>
  <div class="dashboard">
    <!-- 数据统计卡片 -->
    <el-row :gutter="16" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-info">
              <div class="stat-title">总访问次数</div>
              <div class="stat-value">9120</div>
              <div class="stat-trend positive">较上周 +20%</div>
            </div>
            <div class="stat-icon blue">
              <el-icon size="32"><TrendCharts /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-info">
              <div class="stat-title">在线访客数</div>
              <div class="stat-value">182</div>
              <div class="stat-trend positive">较上周 +10%</div>
            </div>
            <div class="stat-icon cyan">
              <el-icon size="32"><User /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-info">
              <div class="stat-title">点击量</div>
              <div class="stat-value">9520</div>
              <div class="stat-trend negative">较上周 -12%</div>
            </div>
            <div class="stat-icon red">
              <el-icon size="32"><Mouse /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-info">
              <div class="stat-title">新用户</div>
              <div class="stat-value">156</div>
              <div class="stat-trend positive">较上周 +30%</div>
            </div>
            <div class="stat-icon purple">
              <el-icon size="32"><UserFilled /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="16" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="chart-header">
              <span class="chart-title">用户概述</span>
              <span class="chart-subtitle">比上期 <span class="positive">+23%</span></span>
            </div>
          </template>
          <div class="chart-content">
            <div ref="barChart" class="chart" style="height: 300px;"></div>
          </div>
          <div class="chart-stats">
            <div class="stat-item">
              <div class="stat-label">总用户量</div>
              <div class="stat-number">32k</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">总访问量</div>
              <div class="stat-number">128k</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">日访问量</div>
              <div class="stat-number">1.2k</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">周增长</div>
              <div class="stat-number">+5%</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="chart-header">
              <span class="chart-title">访问量</span>
              <span class="chart-subtitle">今年增长 <span class="positive">+15%</span></span>
            </div>
          </template>
          <div class="chart-content">
            <div ref="lineChart" class="chart" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 底部内容区 -->
    <el-row :gutter="16" class="bottom-row">
      <el-col :span="8">
        <el-card class="bottom-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="card-title">新用户</span>
              <span class="card-subtitle">本月增长 <span class="positive">+200%</span></span>
            </div>
          </template>
          <div class="new-users-section">
            <el-button-group class="time-filter">
              <el-button size="small" type="primary">本月</el-button>
              <el-button size="small">上月</el-button>
              <el-button size="small">今年</el-button>
            </el-button-group>
          </div>
          <div class="user-list">
            <div class="user-item" v-for="user in users" :key="user.id">
              <el-avatar :size="40" :src="user.avatar" />
              <div class="user-info">
                <div class="user-name">{{ user.name }}</div>
                <div class="user-location">{{ user.location }}</div>
              </div>
              <div class="user-stats">
                <div class="user-detail">{{ user.gender }}</div>
                <div class="user-detail">{{ user.age }}</div>
              </div>
              <div class="user-progress">
                <el-progress :percentage="user.progress" :color="user.progressColor" :show-text="false" />
                <span class="progress-text">{{ user.progress }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="bottom-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="card-title">动态</span>
              <span class="card-subtitle">新增 <span class="highlight">+6</span></span>
            </div>
          </template>
          <div class="activity-list">
            <div class="activity-item" v-for="activity in activities" :key="activity.id">
              <div class="activity-content">
                <span class="activity-user">{{ activity.user }}</span>
                <span class="activity-action">{{ activity.action }}</span>
                <span class="activity-target" v-if="activity.target">{{ activity.target }}</span>
              </div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="bottom-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="card-title">代办事项</span>
              <span class="card-subtitle">特别注意 <span class="highlight">+6</span></span>
            </div>
          </template>
          <div class="todo-list">
            <div class="todo-item" v-for="todo in todos" :key="todo.id">
              <el-checkbox v-model="todo.completed" />
              <div class="todo-content">
                <div class="todo-title">{{ todo.title }}</div>
                <div class="todo-time">{{ todo.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { TrendCharts, User, Mouse, UserFilled } from '@element-plus/icons-vue'

export default {
  name: 'Dashboard',
  components: {
    TrendCharts,
    User,
    Mouse,
    UserFilled
  },
  setup() {
    const barChart = ref(null)
    const lineChart = ref(null)
    
    // 用户数据
    const users = ref([
      {
        id: 1,
        name: '中小鱼',
        location: '北京',
        gender: '女',
        age: 22,
        progress: 60,
        progressColor: '#409eff',
        avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b601?w=100&h=100&fit=crop&crop=face'
      },
      {
        id: 2,
        name: '何小何',
        location: '深圳',
        gender: '男',
        age: 21,
        progress: 20,
        progressColor: '#909399',
        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'
      },
      {
        id: 3,
        name: '萍萍姿',
        location: '上海',
        gender: '男',
        age: 23,
        progress: 60,
        progressColor: '#67c23a',
        avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face'
      },
      {
        id: 4,
        name: '吴京萱',
        location: '长沙',
        gender: '女',
        age: 28,
        progress: 50,
        progressColor: '#e6a23c',
        avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face'
      }
    ])
    
    // 动态数据
    const activities = ref([
      {
        id: 1,
        user: '中小鱼',
        action: '关注了',
        target: '程序员',
        time: '刚刚'
      },
      {
        id: 2,
        user: '何小何',
        action: '发表文章',
        target: 'Vue3 + TypeScript + Vite 项目搭建指南',
        time: '2分钟前'
      },
      {
        id: 3,
        user: '萍萍姿',
        action: '提出问题',
        target: '主观性节点配置参数',
        time: '5分钟前'
      },
      {
        id: 4,
        user: '吴京萱',
        action: '分享了产品',
        target: '《春时介个一个》',
        time: '10分钟前'
      }
    ])
    
    // 待办事项数据
    const todos = ref([
      {
        id: 1,
        title: '查看今天的工作内容',
        time: '上午 09:30',
        completed: true
      },
      {
        id: 2,
        title: '回复邮件',
        time: '上午 10:30',
        completed: true
      },
      {
        id: 3,
        title: '工作任务整理',
        time: '上午 11:00',
        completed: true
      },
      {
        id: 4,
        title: '产品需求整理',
        time: '下午 02:00',
        completed: false
      }
    ])
    
    // 初始化柱状图
    const initBarChart = () => {
      const chart = echarts.init(barChart.value)
      
      const option = {
        color: ['#409eff'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: '#666' }
        },
        yAxis: {
          type: 'value',
          splitLine: { lineStyle: { color: '#f0f0f0' } },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: '#666' }
        },
        series: [{
          data: [150, 120, 180, 90, 200, 110, 180, 140, 190],
          type: 'bar',
          barWidth: 20,
          itemStyle: { borderRadius: [4, 4, 0, 0] }
        }]
      }
      
      chart.setOption(option)
      
      // 响应式调整
      window.addEventListener('resize', () => {
        chart.resize()
      })
    }
    
    // 初始化折线图
    const initLineChart = () => {
      const chart = echarts.init(lineChart.value)
      
      const option = {
        color: ['#409eff'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: '#666' }
        },
        yAxis: {
          type: 'value',
          splitLine: { lineStyle: { color: '#f0f0f0' } },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: '#666' }
        },
        series: [{
          data: [20, 30, 40, 70, 60, 50, 45, 70, 65, 35, 20, 45],
          type: 'line',
          smooth: true,
          lineStyle: { width: 3 },
          areaStyle: { opacity: 0.1 }
        }]
      }
      
      chart.setOption(option)
      
      // 响应式调整
      window.addEventListener('resize', () => {
        chart.resize()
      })
    }
    
    onMounted(() => {
      setTimeout(() => {
        initBarChart()
        initLineChart()
      }, 100)
    })
    
    return {
      users,
      activities,
      todos
    }
  }
}
</script>

<style scoped>
.dashboard {
  width: 100%;
}

/* 统计卡片样式 */
.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  height: 120px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 8px 0;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.stat-trend {
  font-size: 12px;
}

.stat-trend.positive {
  color: #52c41a;
}

.stat-trend.negative {
  color: #ff4d4f;
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-icon.blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-icon.cyan { background: linear-gradient(135deg, #13c2c2 0%, #52c41a 100%); }
.stat-icon.red { background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%); }
.stat-icon.purple { background: linear-gradient(135deg, #722ed1 0%, #b37feb 100%); }

/* 图表区域样式 */
.chart-row {
  margin-bottom: 24px;
}

.chart-card {
  transition: all 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-2px);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.chart-subtitle {
  font-size: 14px;
  color: #666;
}

.positive {
  color: #52c41a;
}

.chart-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.stat-number {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 底部区域样式 */
.bottom-row {
  margin-bottom: 24px;
}

.bottom-card {
  min-height: 400px;
  transition: all 0.3s ease;
}

.bottom-card:hover {
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.card-subtitle {
  font-size: 14px;
  color: #666;
}

.highlight {
  color: #1890ff;
}

/* 新用户列表样式 */
.new-users-section {
  margin-bottom: 20px;
}

.time-filter {
  margin-bottom: 20px;
}

.user-list {
  max-height: 280px;
  overflow-y: auto;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.user-item:hover {
  background-color: #fafafa;
}

.user-item:last-child {
  border-bottom: none;
}

.user-info {
  flex: 1;
  margin-left: 12px;
}

.user-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  font-weight: 500;
}

.user-location {
  font-size: 12px;
  color: #666;
}

.user-stats {
  display: flex;
  gap: 8px;
  margin-right: 12px;
}

.user-detail {
  font-size: 12px;
  color: #666;
  padding: 2px 6px;
  background: #f0f0f0;
  border-radius: 2px;
}

.user-progress {
  width: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-text {
  font-size: 12px;
  color: #666;
  min-width: 30px;
}

/* 动态列表样式 */
.activity-list {
  max-height: 320px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.activity-item:hover {
  background-color: #fafafa;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
}

.activity-user {
  color: #1890ff;
  font-weight: 500;
}

.activity-action {
  color: #333;
  margin: 0 4px;
}

.activity-target {
  color: #1890ff;
}

.activity-time {
  font-size: 12px;
  color: #999;
  margin-left: 12px;
  white-space: nowrap;
}

/* 待办事项样式 */
.todo-list {
  max-height: 320px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.todo-item:hover {
  background-color: #fafafa;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-content {
  flex: 1;
  margin-left: 12px;
}

.todo-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.todo-time {
  font-size: 12px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-row .el-col,
  .chart-row .el-col,
  .bottom-row .el-col {
    margin-bottom: 16px;
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 0 !important;
  }
  
  .stat-value {
    font-size: 24px;
  }
  
  .chart {
    height: 250px !important;
  }
  
  .bottom-card {
    min-height: auto;
  }
}
</style>
